<template>
	<view class="container" :style="'background-size:100% '+ data.bgheight+';' ">
		<view class="headerNav">
			<u-navbar title="我的积分" :border-bottom="false" :background="{ background: 'transparent' }" title-color="#fff"
				back-icon-color="#fff" placeholder>
				<template v-slot:right>
					<view class="u-flex" @tap="toserve('serve')">
						<text style="font-size: 28rpx;color:#fff;">我的订单</text>
					</view>
				</template>
			</u-navbar>
		</view>
		<view class="Avatar" :style="'height:calc('+data.bgheight+' - '+data.height+');width:100%;'">
			<view class="topnav">
				<view class="leftnav">
					<view class="item-list">
						<text>{{data.myPoints}}</text>
						<text>我的积分</text>
					</view>
				</view>
				<view class="rightnav">

					<view class="rightcenter" @tap="sigin">
						<image
							:src="data.is_sigin==0?'/pages/pagesPersonal/static/myscorecard/qiandao3.png':'/pages/pagesPersonal/static/myscorecard/qiandaovoer.png'"
							mode=""></image>
						<text>{{data.is_sigin==0?'未签到':'已签到'}}</text>

					</view>
				</view>
			</view>
			<view class="bottomgoumai">
				<view class="tableft" @tap="toserve('integral')">
					<image src="/pages/pagesPersonal/static/myscorecard/buy.png" mode=""></image>
					<text>购买积分</text>
				</view>
				<view class="line"></view>
				<view class="tabright" @tap="toserve('detail')">
					<image src="/pages/pagesPersonal/static/myscorecard/shouzhi2.png" mode=""></image>
					<text>收支明细</text>
				</view>

			</view>
		</view>

		<view class="bigNav" :style="'height: calc(100vh - ' +  data.bgheight+')'">
			<view class="bottomcenter">

				<view class="tabdata">
					<view class="tablist" v-for="(item,index) in data.datalist" :key="item.id">
						<view class="listleft">
							<image :src="data.imglist[item.alias]" mode=""></image>
							<view class="text">
								<text>{{item.name}}</text>
								<text>积分:{{item.points}}</text>
							</view>
						</view>
						<view class="listright">
							<view v-if="item.is_done == 0" @tap="justDoTi(item.alias)" class="bttonbbb">
								<text>去完成</text>
							</view>
							<!-- <button v-if="item.is_done == 0" @tap="justDoTi(item.alias)">去完成</button> -->
							<image v-if="item.is_done == 1" src="/pages/pagesPersonal/static/myscorecard/pass.png"
								mode="">
							</image>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const data = reactive({
		bgheight: "",
		height: "",
		isNav: true,
		height: null,
		myPoints: 0,
		datalist: [],
		is_sigin: 0,
		imglist: {
			"sign_in": "/pages/pagesPersonal/static/myscorecard/qiandao.png",
			"bind_weixin": "/pages/pagesPersonal/static/myscorecard/weixin.png",
			"bind_qq": "/pages/pagesPersonal/static/myscorecard/qq.png",
			"refresh_resume": "/pages/pagesPersonal/static/myscorecard/shuaxin.png",
			"upload_photo": "/pages/pagesPersonal/static/myscorecard/userimg.png",
			"upload_logo": "/pages/pagesPersonal/static/myscorecard/logo.png",
			"percent60": "/pages/pagesPersonal/static/myscorecard/wanzhengdu60.png",
			"percent90": "/pages/pagesPersonal/static/myscorecard/wanzhengdu90.png",
			"apply_job": "/pages/pagesPersonal/static/myscorecard/toudi.png",
			"report_job": "/pages/pagesPersonal/static/myscorecard/jvbao.png",
			"reg": "/pages/pagesPersonal/static/myscorecard/reg.png",
			"auth": "/pages/pagesPersonal/static/myscorecard/entpass.png",
			"upload_img": "/pages/pagesPersonal/static/myscorecard/fc.png",
			"handle_resume": "/pages/pagesPersonal/static/myscorecard/shou3.png",
		}
	})

	const myPoints = async () => {
		let res = await uni.$u.api.myPoints({})
		if (res) {
			data.myPoints = res.points
			data.datalist = res.task

			for (var i = 0; i < data.datalist.length; i++) {
				if (data.datalist[i].alias == "sign_in") {
					data.is_sigin = data.datalist[i].is_done
				}
			}
			
			for (var i = 0; i < data.datalist.length; i++) {
				if (data.datalist[i].alias == "sign_in") {
					data.is_sigin = data.datalist[i].is_done
					
				}
				if(data.datalist[i].alias == "bind_qq"){
					
					data.datalist.splice(i,1)
				}
			}
			
	
		}
	}

	const sigin = async () => {
		let res = await uni.$u.api.sign_in()
		if (res) {
			data.is_sigin = 1
			myPoints()
		}
	}

	const justDoTi = (i) => {
		switch (i) {
			case "sign_in":
				sigin()
				break;
			case "bind_weixin":
				uni.$u.route("pages/pagesPersonal/set/bindaccount/bindaccount")
				break;
			case "bind_qq":
				uni.$u.route("pages/pagesPersonal/set/bindaccount/bindaccount")
				break;
			case "refresh_resume":
				uni.$u.route({
					url: "pages/personal/index",
					type: 'tab'
				})
				break;
			case "upload_photo":
				uni.$u.route("pages/pagesPersonal/myResume/information/information")
				break;
			case "percent60":
				uni.$u.route("pages/pagesPersonal/myResume/myResume")
				break;
			case "percent90":
				uni.$u.route("pages/pagesPersonal/myResume/myResume")
				break;
			case "apply_job":
				uni.switchTab({
					url: "/pages/home/home"
				})
				break;
			case "report_job":
				uni.switchTab({
					url: "/pages/home/home"
				})
				break;
			case "reg":
				break;
			case "upload_logo":
				uni.$u.route("pages/pagesPersonal/companyInfo/enterprise")
				break;
			case "upload_img":
				uni.$u.route("pages/pagesPersonal/companyInfo/enterprise")
				break;
			case "auth":
				uni.$u.route("pages/pagesPersonal/set/auth/auth")
				break;
			case "handle_resume":
				uni.$u.route("pages/pagesPersonal/followed/followed")
				break;
		}

	}


	const toserve = (i) => {
		switch (i) {
			case "serve":
				uni.$u.route("pages/pagesPersonal/integral/serve/serve")
				break;
			case "detail":
				uni.$u.route("pages/pagesPersonal/integral/detail/detail")
				break;
			case "integral":
				uni.$u.route("pages/pagesPersonal/toolMall/buyIntegral")
				break;
		}
	}
	const getHeight = async () => {
		let statusHeight = await uni.getSystemInfoSync().statusBarHeight;
		// #ifdef MP-WEIXIN
		// 获取微信右上角胶囊高度
		let res = await wx.getMenuButtonBoundingClientRect();
		data.bgheight = res.top * 2 + 528 + 'rpx';
		// #endif
		// #ifdef APP-PLUS
		data.bgheight = 528 + 'rpx';
		// #endif
		// #ifdef H5
		data.bgheight = 440 + 'rpx';
		// #endif
		let res2 = await uni.$u.getRect('.headerNav');
		if (res2) {
			data.height = res2.height + 'px';
		}
	}
	onReady(() => {
		getHeight()
	})

	onShow(() => {
		myPoints()
	})
</script>
<style lang="scss" scoped>
	page,
	body {
		width: 100vw;
		background-color: #f8f8f8;
		font-family: Arial;
	}

	.container {
		width: 100vw;
		// #ifndef H5
		min-height: 100vh;
		//#endif
		//#ifdef H5
		min-height: calc(100vh - 100rpx);
		//#endif
		background-image: url("/pages/pagesPersonal/static/myscorecard/entbg.jpg");
		background-repeat: no-repeat;

		.Avatar {
			position: relative;

			.topnav {
				padding: 30rpx;
				padding-left: 70rpx;
				width: 100%;
				height: 150rpx;
				display: flex;
				font-family: SourceHanSansSC-regular;

				.leftnav {
					color: #fff;
					font-size: 28rpx;
					width: 50%;
					height: 100%;

					.item-list {
						display: flex;
						flex-direction: column;
						font-family: SourceHanSansSC-regular;

						text:nth-child(1) {
							font-size: 60rpx;
						}
					}

				}

				.rightnav {
					width: 50%;
					height: 100%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					position: relative;

					.rightcenter {
						position: absolute;
						right: 80rpx;
						top: 40rpx;
						width: 158rpx;
						height: 50rpx;
						background-color: #fff;
						border-bottom-left-radius: 32rpx;
						border-top-left-radius: 32rpx;
						border-top-right-radius: 32rpx;
						color: #c0c0c0;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 36rpx;
							height: 34rpx;
							margin: 0 10rpx;
						}
					}

				}
			}

			.bottomgoumai {
				position: absolute;
				bottom: 20rpx;
				height: 80rpx;
				background-color: rgba(120, 156, 229, 0.5);
				width: 100%;
				display: flex;
				align-items: center;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size:28rpx;
				.tableft {
					width: 49%;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 34rpx;
						height: 34rpx;
						vertical-align: middle;
						margin: 0 10rpx;
					}
				}

				.line {
					height: 40rpx;
					width: 1rpx;
					border-left: 2rpx solid #fff;
				}

				.tabright {
					width: 49%;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 30rpx;
						height: 32rpx;
						vertical-align: middle;
						margin: 0 10rpx;

					}
				}

			}
		}

		.bigNav {
			width: 100%;
			padding: 30rpx;
			background-color: #f8f8f8;
			overflow-y: scroll;
			.bottomcenter {
				width: 100%;
				height: 100%;
				// padding: 30rpx;



				.tabdata {
					width: 100%;

					.tablist {
						background-color: #fff;
						width: 100%;
						height: 140rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;
						border-radius: 6rpx;
						padding: 0 20rpx;

						.listleft {
							display: flex;
							font-size: 26rpx;
							color: #BBBBBB;

							image {
								width: 78rpx;
								height: 78rpx;
								margin: 0 20rpx;
							}

							.text {
								display: flex;
								flex-direction: column;
								font-family: SourceHanSansSC-bold;

								text:nth-child(1) {
									color: #000;
									font-size: 28rpx;
									font-weight: bold;
								}
							}
						}

						.listright {

							.bttonbbb {
								width: 156rpx;
								height: 68rpx;
								color: #3F8EFF;
								font-size: 28rpx;
								border-radius: 34rpx;
								background-color: #fff;
								border: 2rpx solid #3F8EFF;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							image {
								width: 130rpx;
								height: 78rpx;
							}
						}
					}
				}
			}
		}
	}

	.u-flex {
		margin-right: 20rpx;

		text {
			white-space: nowrap !important;
		}
	}
	
	//#ifdef MP-WEIXIN
	
	:deep .u-navbar-content-title .u-title {
		text-align: left;
	}
   // #endif
	
</style>